<template>
  <div>
    <!-- 查询条件部分 -->
    <bfe-card class="box-card condition-form-card">
      <bfe-form :inline="true">
        <#list conditions! as condition>
        <bfe-form-item label="${condition.comment}" class="condition-item">
          <bfe-input v-model="pageCondition.condition.${condition.name}" placeholder="${condition.comment}"></bfe-input>
        </bfe-form-item>
        </#list>
      </bfe-form>
      <div>
        <bfe-form>
          <bfe-form-item class="condition-form-btn-block">
            <bfe-button type="primary" @click="getDatas">查询</bfe-button>
            <bfe-button @click="resetCondition">重置</bfe-button>
          </bfe-form-item>
        </bfe-form>
      </div>
    </bfe-card>
    <!------------------->

    <!-- 数据列表 -->
    <bfe-card class="box-card">
      <bfe-table
        :data="datas"
        border
        style="width: 100%"
        v-loading.body="loading"
        :row-class-name="tableRowClassName"
      >
        <bfe-table-column label="序号" width="80">
          <template slot-scope="scope">{{scope.$index + 1}}</template>
        </bfe-table-column>
        <#list columns! as column>
        <bfe-table-column prop="${column.name}" label="${column.comment}"></bfe-table-column>
        </#list>
        <bfe-table-column label="操作">
          <template slot-scope="scope">
            <bfe-button type="text" size="small" @click="checkDetail(scope.$index)">查看详情</bfe-button>
          </template>
        </bfe-table-column>
        <div slot="empty" style="margin:20px;">
          <img src="../../assets/images/icon-nodata.png" />
          <div style="color:rgb(130, 94, 98)">暂无数据</div>
        </div>
      </bfe-table>
    </bfe-card>
    <!------------------->

    <!-- 分页页码部分 -->
    <div class="pagination-block" v-show="showPagination">
      <bfe-pagination
        @current-change="handleCurrentChange"
        :current-page="pageCondition.current"
        :page-size="pageCondition.size"
        layout="total, prev, pager, next, jumper"
        :total="datasTotal"
      ></bfe-pagination>
    </div>
    <!------------------->

    <!-- 数据详情部分 -->
    <bfe-dialog
      title="详情"
      :visible.sync="detailDialogVisible"
      :before-close="beforeDetailDialogClose"
    >
      <bfe-form label-width="180px" v-if="detail">
        <bfe-form-item v-for="(val, key) in commentMap" :key="key">
          <span slot="label" style="font-weight: bold;">{{val.comment}}：</span>
          {{getDetailVal(key, val)}}
        </bfe-form-item>
      </bfe-form>
    </bfe-dialog>
    <!------------------->
  </div>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      loading: false,
      // 查看详情弹窗标志
      detailDialogVisible: false,
      // 数据总数量
      datasTotal: 0,
      showPagination: false,
      pageCondition: {
        current: 1,
        size: 10,
        condition: {
          <#list conditions! as condition>
          ${condition.name}: null<#if condition_has_next>,</#if>
          </#list>
        }
      },
      // 查询数据
      datas: [],
      // 数据详情
      detail: null,
      // 字段注释
      commentMap: {
        <#list columns! as column>
        ${column.name}: {
          comment: "${column.comment}",
          type: "${column.type}"
        }<#if column_has_next>,</#if>
        </#list>
      }
    };
  },

  mounted() {
    this.getDatas();
  },

  methods: {
    handleCurrentChange(val) {
      this.pageCondition.current = val;
      this.getDatas();
    },

    resetCondition() {
      this.pageCondition.current = 1;
      <#list conditions! as condition>
      this.pageCondition.condition.${condition.name} = null;
      </#list>
      this.getDatas();
    },

    dateFormatCell(row, column, cellValue) {
      return this.dateFormat(cellValue);
    },

    timeFormatCell(row, column, cellValue) {
      return this.timeFormat(cellValue);
    },

    dateFormat(val) {
      return moment(val).format("yyyy-MM-DD");
    },

    timeFormat(val) {
      return moment(val).format("yyyy-MM-DD hh:mm:ss");
    },

    getDatas() {
      this.loading = true;
      this.$axios
        .request({
          method: "post",
          url: "/api/${middleLineModelName}/page",
          data: this.pageCondition
        })
        .then(resp => {
          this.loading = false;
          if (resp.data.code === 200) {
            this.datasTotal = resp.data.data.total;
            this.showPagination = this.datasTotal > this.pageCondition.size;
            this.datas = resp.data.data.records;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    // 查看详情
    checkDetail(index) {
      this.detail = this.datas[index];
      this.detailDialogVisible = true;
    },

    getDetailVal(key, val) {
      switch (val.type) {
      case "STRING":
        return this.detail[key];
      case "DATE":
        return this.dateFormat(this.detail[key]);
      case "TIME":
        return this.timeFormat(this.detail[key]);
      default:
        return this.detail[key];
      }
    },

    beforeDetailDialogClose(done) {
      this.detail = null;
      // console.log("beforeDetailDialogClose:::", this.detail);
      done();
    },

    tableRowClassName(row, index) {
      if (index % 2 !== 0) {
        return "positive-row";
      }
      return "";
    }
  }
};
</script>

